<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=0.5,minimum=1,maximum=1,user-scalable=no">
    <title>微信场景</title>
    <link rel="stylesheet" type="text/css" href="css/Reset.css">
    
    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="css/swiper.min.css">
    <!-- <link rel="stylesheet" type="text/css" href="css/animate.css"> -->
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <style type="text/css">
    ::-webkit-scrollbar {
        width: 0;
        height: 0;
    }
    </style>
    <script>
    var html = document.getElementsByTagName('html')[0];
    html.style.fontSize = html.clientWidth / 6.4 + "px";
    addEventListener("resize", function() {
        html.style.fontSize = html.clientWidth / 6.4 + "px";
    }, false)
    </script>
    <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
    <script type="text/javascript">
    var imgs = ["images/a.png", "images/ad1.png", "images/ad2.png", "images/ad3.png", "images/ad4.png", "images/arr.png", "images/b.png", "images/c.png", "images/c1.png", "images/c2.png", "images/c3.png", "images/c4.png", "images/c5.png", "images/c6.png", "images/d.png", "images/d1.png", "images/e.png", "images/music.png"];
    var cnt = 0;

    for (var i = 0; i < imgs.length; i++) {
        // 图片预加载
        var img = new Image();
        img.src = imgs[i];
        img.onload = function() {

            cnt++;
            if (cnt == imgs.length) {
                $loading = $("#loading")
                $loading.fadeOut("200");
                //console.log($loading);
                // alert("图片加载完成")        
            }
        }
    }
    </script>
</head>

<body>
    <div class="main">
        <div id="loading" class="loading">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <div>你的技能是否已经载满....</div>
        </div>
        <canvas id="canvas" height="960" width="640"></canvas>
        <!-- Swiper -->
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide" id="li1">
                    <ul class="li1Child">
                        <li class="slideInLeft animated ">
                            <p>曾经做为前端开发的你</p>
                            <p>解决PC兼容性而焦头烂额</p>
                        </li>
                        <li class="slideInRight animated ">
                            <p>而今</p>
                            <p>移动端H5应用疯狂来袭</p>
                        </li>
                        <li class="slideInLeft animated ">
                            <p>你是否已准备充分</p>
                            <p>学习新技能</p>
                        </li>
                        <li class="slideInRight animated ">
                            <p>曾破茧成蝶、重获新生？</p>
                        </li>
                    </ul>
                </div>
                <div class="swiper-slide" id="li2">
                    <ul class="li2Child">
                        <li class="ball1"><img src="images/c1.png"></li>
                        <li class="ball2"><img src="images/c2.png"></li>
                        <li class="ball3"><img src="images/c3.png"></li>
                        <li class="ball4"><img src="images/c4.png"></li>
                        <li class="ball5"><img src="images/c5.png"></li>
                        <li class="ball6"><img src="images/c6.png"></li>
                    </ul>
                </div>
                <div class="swiper-slide" id="li3">
                    <div class="li3Child"></div>
                </div>
                <div class="swiper-slide" id="li4">
                    <ul class="li4Child">
                        <li >transform transition rotate scale translate keyframes animation webkitTransitionEnd webkitAnimationIteration elapsedTime perspective…</li>
                        <li >drawImage lineWidth strokeStyle lineCap globalCompositeOperation moveTo lineTo stroke arc getImageData…</li>
                        <li >audio autoplay loop paused play pause…</li>
                    </ul>
                </div>
                <div class="swiper-slide"><img src="images/ad1.png"></div>
                <div class="swiper-slide"><img src="images/ad2.png"></div>
                <div class="swiper-slide"><img src="images/ad3.png"></div>
                <div class="swiper-slide"><img src="images/ad4.png"></div>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
        </div>
        <div id="arrow"></div>
        <div id="music" onclick="playPause()">
            <audio id="audio1" src="images/music.mp3" preload="auto" loop></audio>
        </div>
    </div>
    <!-- Swiper JS -->
    <script type="text/javascript" src="js/swiper.min.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
    <!-- Initialize Swiper -->
    <script>
    var swiper = new Swiper('.swiper-container', {
        direction: 'vertical',
        slidesPerView: 1,
        mousewheelControl: true,
        loop: true,


        onSlideChangeEnd: function(swiper) {
            // alert("1111")
            //你的事件
            // $(".swiper-slide-active ul li:even").addClass("animated bounceInLeft");
            // $(".swiper-slide-active ul li:odd").addClass("animated bounceInRight");
            // console.log($(".swiper-slide-active ul li:even"));
            // console.log($(".swiper-slide-active ul li:odd"));
        }
    });
    </script>
</body>

</html>


